﻿@model EventSys.MVC4Web.Models.UsuarioDTO

<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        $("#roles").css("height", "300px");
        $("#roles").css("width", "200px");
        $("#userRoles").css("height", "300px");
        $("#userRoles").css("width", "200px");

       
        $("#btnAdd").click(function () {

            var _userName = $("#NombreUsuario").val();

            $("#roles option:selected").each(function () {

                var _rol = $(this).val();
                $.post(
                       '@Url.Action("AddRol", "Account")',
                       { userName: _userName, rol: _rol },
                       function (ok) {
                           if (ok) {
                               $("#userRoles").append(
                                   $('<option>').text(_rol).val(_rol)
                               ).find('option:last').hide().fadeIn("slow");

                               $('#roles > option[value="' + _rol + '"]').remove().fadeIn("slow");
                           }
                           else {
                               alert("No se ha podido agregar el Rol:<br/><b>" + _rol + "</b>");
                           }
                       },
                   "json"
                   );
            });
        });

        $("#btnRemove").click(function () {

            var _userName = $("#NombreUsuario").val();

            $("#userRoles option:selected").each(function () {

                var _rol = $(this).val();
                $.post(
                       '@Url.Action("RemoveRol", "Account")',
                       { userName: _userName, rol: _rol },
                       function (ok) {
                           if (ok) {
                               $("#roles").append(
                                   $('<option>').text(_rol).val(_rol)
                               ).find('option:last').hide().fadeIn("slow");

                               $('#userRoles > option[value="' + _rol + '"]').remove().fadeIn("slow");
                           }
                           else {
                               alert("No se ha podito Quitar el Rol:<br/><b>" + _rol + "</b>");
                           }
                       },
                   "json"
                   );
            });
        });
    });
</script>
 


<div id="dialogAddRoles"">

<h2>Asignar Rol</h2>

<div class="cpanel ui-widget ui-widget-content ui-corner-all">
   <table class="toolbar">
       <tr>
           <td valign="middle" >
               <img src="@Url.Content("~/Images/user.png")" title="UsuarioRol" alt="UsuarioRol" />
           </td>
           <td class="tdHeader">
               <span class="header">
                   Asignar Rol:<br /> Nombre de Usuario: @Html.DisplayFor(model => model.NombreUsuario)
               </span>
               @Html.HiddenFor(model => model.NombreUsuario)<br />
           </td>
           <td><center>
               <br />               
                @Html.ActionLink("Guardar Cambios", "ListaUsuarios", "UserProfile")
               </center>
           </td>
       </tr>
   </table>
    
</div> 


<div class = "titleView ui-widget ui-widget-content ui-corner-all">
   <table border="0" cellpadding="0" cellspacing="0">
       <tr>
           <td>
               <center><b>Roles Disponibles</b></center>
               @Html.ListBox("roles")
           </td>
           <td valign="middle">
               <center>
                   <button id="btnAdd">Agregar</button><br /><br />
                   <button id="btnRemove">Quitar</button>
               </center>                
           </td>
           <td>
               <center><b>Roles Asignados</b></center>
               @Html.ListBox("userRoles")
           </td>
       </tr>
   </table>     
</div>

    </div>


